<template>
	<el-upload :action="uploadAction" :data="uploadParams" :file-list="imageUrlList" v-bind="uploadConfig">
		<i slot="default" class="el-icon-plus"></i>
		<template slot="file" slot-scope="{ file }">
			<el-image ref="image" :src="file.url" :preview-src-list="previreList" :initial-index="previewIndex" fit="cover"></el-image>
			<span class="el-upload-list__item-actions">
				<span class="el-upload-list__item-preview" @click="handleOpenPreview(file)">
					<i class="el-icon-search"></i>
				</span>
				<span class="el-upload-list__item-delete" @click="handleRemoveCover(file)">
					<i class="el-icon-delete"></i>
				</span>
			</span>
		</template>
	</el-upload>
</template>

<script>
import lodash from 'lodash';
import { attachDelete } from '@/api/global.js';
export default {
	props: {
		list: { type: Array, default: () => [] },
		type: String
	},
	data() {
		return {
			uploadConfig: {
				listType: 'picture-card',
				class: 'lib_cover_upload',
				accept: '.jpg,.jpeg,.png,.gif',
				onSuccess: this.handleUploadSuccess,
				headers: { Authorization: this.$local.get('token') }
			},
			previewIndex: 1,
			previreList: [],
			imageUrlList: []
		};
	},
	computed: {
		uploadAction() {
			let baseUrl = !window.baseUrl ? process.env.VUE_APP_BASEURL : window.baseUrl;
			return `${baseUrl}tbSysAttachment/upload`;
		},
		uploadHeaders() {
			return { Authorization: this.$local.get('token') };
		},
		uploadParams() {
			return { type: '5', showType: '1', category: this.type };
		}
	},
	watch: {
		list: {
			handler(arr) {
				let dataArr = lodash.sortBy(arr, 'createTime');
				this.imageUrlList = dataArr.map((item) => {
					return { id: item.id, name: item.oldName, url: item.attrAddr };
				});
				this.previreList = this.imageUrlList.map((item) => item.url);
			},
			immediate: true
		}
	},
	methods: {
		//上传成功
		handleUploadSuccess(data) {
			console.log(data);
		},

		//预览图片
		handleOpenPreview(file) {
			this.previewIndex = this.imageUrlList.findIndex((n) => n.id === file.id);
			this.$refs['image'].clickHandler();
		},

		//删除
		handleRemoveCover(file) {
			let that = this;
			this.$confirm(`此操作将永久删除此封面图, 是否继续?`, '删除提示', {
				type: 'warning',
				async beforeClose(action, instance, done) {
					if (action === 'confirm') {
						let index = that.imageUrlList.findIndex((n) => n.id === file.id);
						instance.confirmButtonLoading = true;
						await that.deleteCoverRequest(file.id, index);
						instance.confirmButtonLoading = false;
						done();
					} else {
						done();
					}
				}
			}).catch(() => {});
		},

		//删除请求
		async deleteCoverRequest(id, index) {
			let result = await attachDelete(id).then((res) => res.data);
			if (result.code === '0') {
				this.$message.success('删除封面图成功');
				this.imageUrlList.splice(index, 1);
			} else {
				this.$message.error('删除封面图失败');
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.lib_cover_upload::v-deep {
	overflow: hidden;
	.el-upload-list__item {
		float: left;
		margin: 0 16px 16px 0;
		width: 213px;
		height: 120px;
		transition: none;
	}
	.el-upload {
		float: left;
		width: 213px;
		height: 120px;
		line-height: 120px;
		margin-bottom: 16px;
	}
}
</style>
